{extend name="layout/main" /}

{block name="style"}
<style>
    .system-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .info-section {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .info-header {
        background: #f8f9fa;
        padding: 15px 20px;
        border-bottom: 1px solid #e9ecef;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .info-body {
        padding: 20px;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        color: #666;
        font-size: 14px;
    }
    
    .info-value {
        color: #333;
        font-weight: 500;
        font-size: 14px;
    }
    
    .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
    }
    
    .status-success {
        background: #27ae60;
    }
    
    .status-warning {
        background: #f39c12;
    }
    
    .status-error {
        background: #e74c3c;
    }
    
    .progress-bar {
        width: 100%;
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 5px;
    }
    
    .progress-fill {
        height: 100%;
        background: #3498db;
        transition: width 0.3s;
    }
    
    .progress-fill.warning {
        background: #f39c12;
    }
    
    .progress-fill.danger {
        background: #e74c3c;
    }
    
    .action-panel {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .action-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .permission-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }
    
    .permission-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: #f8f9fa;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .permission-ok {
        background: #d4edda;
        color: #155724;
    }
    
    .permission-error {
        background: #f8d7da;
        color: #721c24;
    }
    
    @media (max-width: 768px) {
        .system-grid {
            grid-template-columns: 1fr;
        }
        
        .action-buttons {
            flex-direction: column;
        }
        
        .permission-list {
            grid-template-columns: 1fr;
        }
    }
</style>
{/block}

{block name="breadcrumb"}
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-item active">系统状态</span>
{/block}

{block name="content"}
<!-- 操作面板 -->
<div class="action-panel">
    <h4 style="margin-bottom: 15px;">系统操作</h4>
    <div class="action-buttons">
        <button class="btn btn-warning" onclick="clearCache()">清理缓存</button>
        <button class="btn" onclick="refreshStatus()">刷新状态</button>
        <button class="btn btn-success" onclick="checkHealth()">健康检查</button>
    </div>
</div>

<!-- 系统信息网格 -->
<div class="system-grid">
    <!-- 系统信息 -->
    <div class="info-section">
        <div class="info-header">
            <span class="status-indicator status-success"></span>
            系统信息
        </div>
        <div class="info-body">
            <div class="info-item">
                <span class="info-label">PHP版本</span>
                <span class="info-value">{$system_info.php_version}</span>
            </div>
            <div class="info-item">
                <span class="info-label">操作系统</span>
                <span class="info-value">{$system_info.os}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Web服务器</span>
                <span class="info-value">{$system_info.server_software}</span>
            </div>
            <div class="info-item">
                <span class="info-label">内存限制</span>
                <span class="info-value">{$system_info.memory_limit}</span>
            </div>
            <div class="info-item">
                <span class="info-label">执行时间限制</span>
                <span class="info-value">{$system_info.max_execution_time}秒</span>
            </div>
            <div class="info-item">
                <span class="info-label">时区</span>
                <span class="info-value">{$system_info.timezone}</span>
            </div>
            <div class="info-item">
                <span class="info-label">当前时间</span>
                <span class="info-value">{$system_info.current_time}</span>
            </div>
        </div>
    </div>
    
    <!-- 数据库信息 -->
    <div class="info-section">
        <div class="info-header">
            <span class="status-indicator {if $database_info.status == 'connected'}status-success{else}status-error{/if}"></span>
            数据库信息
        </div>
        <div class="info-body">
            <div class="info-item">
                <span class="info-label">数据库版本</span>
                <span class="info-value">{$database_info.version}</span>
            </div>
            <div class="info-item">
                <span class="info-label">连接状态</span>
                <span class="info-value">
                    {if $database_info.status == 'connected'}
                        <span style="color: #27ae60;">已连接</span>
                    {else}
                        <span style="color: #e74c3c;">连接失败</span>
                    {/if}
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">连接时间</span>
                <span class="info-value">{$database_info.connection_time}</span>
            </div>
            <div class="info-item">
                <span class="info-label">数据库大小</span>
                <span class="info-value">{$database_info.size}</span>
            </div>
            <div class="info-item">
                <span class="info-label">数据表数量</span>
                <span class="info-value">{$database_info.table_count}个</span>
            </div>
        </div>
    </div>
    
    <!-- 服务器资源 -->
    <div class="info-section">
        <div class="info-header">
            <span class="status-indicator {if $server_info.disk_usage_percent < 80}status-success{elseif $server_info.disk_usage_percent < 90}status-warning{else}status-error{/if}"></span>
            服务器资源
        </div>
        <div class="info-body">
            <div class="info-item">
                <span class="info-label">磁盘总容量</span>
                <span class="info-value">{$server_info.disk_total}</span>
            </div>
            <div class="info-item">
                <span class="info-label">已使用空间</span>
                <span class="info-value">{$server_info.disk_used}</span>
            </div>
            <div class="info-item">
                <span class="info-label">可用空间</span>
                <span class="info-value">{$server_info.disk_free}</span>
            </div>
            <div class="info-item">
                <span class="info-label">磁盘使用率</span>
                <span class="info-value">
                    {$server_info.disk_usage_percent}%
                    <div class="progress-bar">
                        <div class="progress-fill {if $server_info.disk_usage_percent >= 90}danger{elseif $server_info.disk_usage_percent >= 80}warning{/if}" 
                             style="width: {$server_info.disk_usage_percent}%"></div>
                    </div>
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">内存使用</span>
                <span class="info-value">{$server_info.memory_usage}</span>
            </div>
            <div class="info-item">
                <span class="info-label">内存峰值</span>
                <span class="info-value">{$server_info.memory_peak}</span>
            </div>
            <div class="info-item">
                <span class="info-label">系统负载</span>
                <span class="info-value">{$server_info.load_average}</span>
            </div>
        </div>
    </div>
    
    <!-- 应用信息 -->
    <div class="info-section">
        <div class="info-header">
            <span class="status-indicator status-success"></span>
            应用信息
        </div>
        <div class="info-body">
            <div class="info-item">
                <span class="info-label">ThinkPHP版本</span>
                <span class="info-value">{$app_info.think_version}</span>
            </div>
            <div class="info-item">
                <span class="info-label">调试模式</span>
                <span class="info-value">
                    {if $app_info.app_debug == 'ON'}
                        <span style="color: #f39c12;">开启</span>
                    {else}
                        <span style="color: #27ae60;">关闭</span>
                    {/if}
                </span>
            </div>
        </div>
    </div>
</div>

<!-- 目录权限检查 -->
<div class="content-card mb-20">
    <div class="content-card-header">
        <h3 class="content-card-title">目录权限检查</h3>
    </div>
    <div class="content-card-body">
        <div class="permission-list">
            {volist name="app_info.directories" id="writable" key="dir"}
            <div class="permission-item {if $writable}permission-ok{else}permission-error{/if}">
                <span class="status-indicator {if $writable}status-success{else}status-error{/if}"></span>
                {$dir} - {if $writable}可写{else}不可写{/if}
            </div>
            {/volist}
        </div>
    </div>
</div>

<!-- 文件检查 -->
<div class="content-card">
    <div class="content-card-header">
        <h3 class="content-card-title">关键文件检查</h3>
    </div>
    <div class="content-card-body">
        <div class="permission-list">
            {volist name="app_info.files" id="exists" key="file"}
            <div class="permission-item {if $exists}permission-ok{else}permission-error{/if}">
                <span class="status-indicator {if $exists}status-success{else}status-error{/if}"></span>
                {$file} - {if $exists}存在{else}不存在{/if}
            </div>
            {/volist}
        </div>
    </div>
</div>
{/block}

{block name="script"}
    // 清理缓存
    function clearCache() {
        if (confirm('确定要清理系统缓存吗？')) {
            fetch('/admin/system/clearCache', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    alert(data.msg);
                } else {
                    alert('清理失败：' + data.msg);
                }
            })
            .catch(error => {
                alert('操作失败，请重试');
            });
        }
    }
    
    // 刷新状态
    function refreshStatus() {
        location.reload();
    }
    
    // 健康检查
    function checkHealth() {
        let healthStatus = [];
        
        // 检查磁盘使用率
        const diskUsage = {$server_info.disk_usage_percent};
        if (diskUsage >= 90) {
            healthStatus.push('⚠️ 磁盘使用率过高：' + diskUsage + '%');
        }
        
        // 检查数据库连接
        const dbStatus = '{$database_info.status}';
        if (dbStatus !== 'connected') {
            healthStatus.push('❌ 数据库连接失败');
        }
        
        // 检查调试模式
        const debugMode = '{$app_info.app_debug}';
        if (debugMode === 'ON') {
            healthStatus.push('⚠️ 生产环境建议关闭调试模式');
        }
        
        if (healthStatus.length === 0) {
            alert('✅ 系统健康状态良好！');
        } else {
            alert('健康检查结果：\n\n' + healthStatus.join('\n'));
        }
    }
    
    // 页面加载完成后自动更新时间
    setInterval(function() {
        const now = new Date();
        const timeString = now.getFullYear() + '-' + 
                          String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                          String(now.getDate()).padStart(2, '0') + ' ' + 
                          String(now.getHours()).padStart(2, '0') + ':' + 
                          String(now.getMinutes()).padStart(2, '0') + ':' + 
                          String(now.getSeconds()).padStart(2, '0');
        
        // 更新当前时间显示
        const timeElements = document.querySelectorAll('.info-value');
        timeElements.forEach(function(element) {
            if (element.textContent.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/)) {
                element.textContent = timeString;
            }
        });
    }, 1000);
{/block}
